import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import './app-visual-ip-input.less';

/**
 * @description 虚拟表单IP输入框
 * @export
 * @class AppVisualIPInput
 * @extends {Vue}
 */
@Component({})
export class AppVisualIPInput extends Vue {

  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualIPInput
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualIPInput
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualIPInput
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualIPInput
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualIPInput
   */
  @Prop() public position!: any;

  /**
   * @description 代码表服务
   * @type {*}
   * @memberof AppVisualIPInput
   */
  @Prop() public codeListService!: any;

  /**
   * @description 上下文
   * @type {string}
   * @memberof AppVisualIPInput
   */
  @Prop() context!: any;

  /**
   * @description 视图参数
   * @type {string}
   * @memberof AppVisualIPInput
   */
  @Prop() viewparam!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualIPInput
   */
  @Prop() realCompRef!: any;

  /**
   * @description ip数据
   * @type {string[]}
   * @memberof AppVisualIPInput
   */
  public ip: string[] = ['','','',''];

  /**
   * @description 创建
   * @memberof AppVisualIPInput
   */
  public created() {
    if (this.value) {
      this.ip = this.value.split('.');
    }
  }

  /**
   * @description 值改变
   * @param {*} $event 事件源
   * @param {number} index 索引
   * @memberof AppVisualIPInput
   */
  public onChange($event: any, index: number) {
    let reg = /^(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
    const value = $event.target.value;
    if (value && reg.test(value)) {
      this.ip[index] = value;
    } else {
      this.ip[index] = '';
      this.$forceUpdate();
    }
    let checkValue: boolean = true;
    this.ip.forEach((item: any) => {
      if (!item || !reg.test(item)) {
        checkValue = false;
      }
    });
    if (checkValue) {
      const _value = this.ip.join('.');
      this.$emit('change', { name: this.name, value: _value });
    }
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualIPInput
   */
  public render() {
    return (
      <div class={'app-visual-ip-input luckysheet-mousedown-cancel'}>
        {
          this.ip.map((item: any, index: number) => {
            const ipInput = [
              <input
                type="number"
                class="ip__inner luckysheet-mousedown-cancel"
                maxlength={3}
                disabled={this.realCompRef.disabled}
                readonly={this.realCompRef.readonly}
                value={item}
                onBlur={($event: any) => { this.onChange($event, index)}}
                >
              </input>
            ]
            if (index !== 3) {
              ipInput.push(<span><b>.</b></span>);
            }
            return ipInput;
          })
        }
      </div>
    )
  }
}
